<template>
	<view class="detail-page">
		<loadingVue v-if="isloading" :isloading="isloading"></loadingVue>
		<view class="main">
			<view class="boxc">
				<view class="navigation">
					<view class="icon" @click="back"></view>
				</view>
				<view class="imgBox">
					<view class="image"
						:style="{ backgroundImage: 'url(https://api.jingkakeji.com/' + detailsMsg.images[0] + ')' }">
					</view>
				</view>
				<view class="Sesame_Credit">
					<view class="icon">

					</view>
					<view class="text">
						芝麻信用·550分以上有机会免押
					</view>
				</view>
				<view class="detailMsg">
					<detailMsgVue :detailsMsg="detailsMsg"></detailMsgVue>
				</view>
				<view class="tip">
					<view class="textBox">
						<view class="icon" style="background-image: url('/static/index/box1.png');"></view>
						<view class="text">
							租赁信赖平台
						</view>
					</view>
					<view class="dian">·</view>
					<view class="textBox">
						<view class="icon" style="background-image: url('/static/index/box2.png');"></view>
						<view class="text">
							安心租保障
						</view>
					</view>
					<view class="dian">·</view>
					<view class="textBox">
						<view class="icon" style="background-image: url('/static/index/box3.png');"></view>
						<view class="text">
							国行正品售后无忧
						</view>
					</view>
				</view>
				<view class="peace">
					<peaceVue></peaceVue>
				</view>
				<view class="changeType">
					<changeTypeVue :orderNeedId="orderNeedId" :detailsMsg="detailsMsg" ref="changeTypeComponent">
					</changeTypeVue>
				</view>
				<view class="business">
					<businessVue></businessVue>
				</view>
				<view class="appraise">
					<appraiseVue></appraiseVue>
				</view>
				<view class="introduce">
					<introduceVue :detailsMsg="detailsMsg"></introduceVue>
				</view>
				<view class="illustrate">
					<illustrateVue></illustrateVue>
				</view>
				<view class="tips">
					<tipsVue></tipsVue>
				</view>
				<view class="list">
					<view class="title">
						为你推荐
					</view>
					<phoneListVue :phoneList="phoneList"></phoneListVue>
				</view>
			</view>
		</view>
		<view class="buyBox">
			<view class="box">
				<view class="btns">
					<view class="btns-item" @click="home">
						<view class="icon" style="background-image: url('/static/detail/home.png');"></view>
						<view class="text">首页</view>
					</view>
					<view class="btns-item" @click="kefu">
						<view class="icon" style="background-image: url('/static/detail/customer.png');"></view>
						<view class="text">客服</view>
					</view>
					<view class="btns-item" @click="onicons">
						<view class="icon" v-if="isCollection"
							style="background-image: url('/static/detail/collection_yes.png');"></view>
						<view class="icon" v-else style="background-image: url('/static/detail/collection.png');">
						</view>
						<view class="text">收藏</view>
					</view>
				</view>
				<view class="pay" @click="okays">立即下单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Details,
		get_address_list,
		collectadd,
		iscollect,
		Page
	} from '../../api/api';
	import navgatsVue from '../../common/navgats/navgats.vue';
	import detailMsgVue from '../../common/detail/detailMsg.vue';
	import peaceVue from '../../common/detail/peace.vue';
	import changeTypeVue from '../../common/detail/changeType.vue';
	import businessVue from '../../common/detail/business.vue';
	import appraiseVue from '../../common/detail/appraise.vue';
	import introduceVue from '../../common/detail/introduce.vue';
	import illustrateVue from '../../common/detail/illustrate.vue';
	import tipsVue from '../../common/detail/tips.vue';
	import phoneListVue from '../../common/my/phone-list/phone-list.vue';
	import buyBoxVue from '../../common/detail/buyBox.vue';
	import loadingVue from '../../common/loading.vue';
	export default {
		data() {
			return {
				isloading: true,
				navigationMsg: {
					bgColor: "#f6f6f6"
				},
				// 详情页数据
				detailsMsg: {
					images: []
				},
				// 详情页id
				opensid: "",
				//地址列表
				// addlists: [],
				// 为你推荐
				phoneList: [],
				// 生成订单需要的id
				orderNeedId: {
					//地址id
					addressId: "",
				},
				isCollection: ""
			}
		},
		components: {
			navgatsVue,
			buyBoxVue,
			detailMsgVue,
			peaceVue,
			businessVue,
			introduceVue,
			illustrateVue,
			tipsVue,
			phoneListVue,
			changeTypeVue,
			appraiseVue,
			loadingVue
		},
		onLoad(options) {
			// console.log(options, '详情页id');
			this.opensid = options.id
			this.getDeatil(options.id)
			this.isCollect(this.detailsMsg.id)
			this.get_address_lists()
			this.onpages()
		},
		methods: {
			//为你推荐
			async onpages() {
				let res = await Page()
				if (res.data.code == 1) {
					this.phoneList = res.data.data.clearance
				}
			},
			//查询是否收藏
			async isCollect(id) {
				let data = {
					product_id: id
				}
				// let res = await iscollect(data)
				// console.log(res.data.data, '是否收藏');
			},

			//加入收藏
			async onicons() {
				let data = {
					product_id: this.detailsMsg.id
				}
				let res = await collectadd(data)
				if (res.data.code == 1) {
					uni.showToast({
						title: res.data.msg,
						duration: 1500,
						icon: "none"
					})
				}
				//暂时收藏
				this.isCollect = true
			},
			//地址列表
			async get_address_lists() {
				let res = await get_address_list()
				if (res.data.code == 1) {
					// this.addlists = res.data.data
					// console.log("地址数据", res.data.data);
					this.orderNeedId.addressId = res.data.data[0].id
				}
			},
			//下单
			async okays() {
				this.$refs.changeTypeComponent.openChangeType();
			},
			//返回
			back() {
				let canNavBack = getCurrentPages()
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack()
				} else {
					history.back();
				}
			},
			//详情数据
			async getDeatil(id) {
				let data = {
					id: id
				}
				let res = await Details(data)
				if (res.data.code == 1) {
					this.isloading = false
					this.detailsMsg = res.data.data
					console.log(this.detailsMsg.spec_data.skuList[0].tenure_months[12].every_day, '详情数据');
				}
			},
			//客服
			kefu() {
				uni.navigateTo({
					url: "/pages/mys/kefus/kefus"
				})
			},
			//首页
			home() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-page {
		width: 100vw;
		height: 100vh;
		background-color: #f6f6f6;
		display: flex;
		flex-direction: column;
		align-items: center;

		.main {
			width: 100%;
			height: calc(100% - 120rpx);
			overflow-y: scroll;

			.boxc {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.navigation {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: end;

					.icon {
						width: 40rpx;
						height: 40rpx;
						background-image: url("/static/detail/left_black.png");
						background-size: cover;
						margin-left: 20rpx;
					}
				}

				.imgBox {
					width: 100%;
					height: 500rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.image {
						width: 90%;
						height: 500rpx;
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
						margin-bottom: 20rpx;
					}
				}

				.Sesame_Credit {
					width: 95%;
					height: 70rpx;
					background-color: #dce9fe;
					border-radius: 20rpx;
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						background-image: url("/static/detail/zm.png");
						background-size: contain;
						background-position: center;
						background-repeat: no-repeat;
						margin: 0px 10rpx;
					}

					.text {
						font-size: 28rpx;
						color: #5495f6;
					}
				}

				.detailMsg {
					width: 95%;
					height: 520rpx;
					background-color: white;
					margin-top: 20rpx;
					border-radius: 20rpx 20rpx 0px 0px;
					overflow: hidden;
				}

				.tip {
					width: 90%;
					height: 50rpx;
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #b4b4b4;

					.textBox {
						display: flex;
						align-items: center;

						.icon {
							width: 25rpx;
							height: 25rpx;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
						}
					}
				}

				.peace {
					width: 95%;
					height: 215rpx;
					margin-top: 20rpx;
				}

				.changeType {
					width: 95%;
					height: 530rpx;
					background-color: white;
					margin-top: 20rpx;
					border-radius: 20rpx;
					overflow: hidden;
				}

				.business {
					width: 95%;
					height: 200rpx;
					margin-top: 20rpx;
					border-radius: 20rpx;
					overflow: hidden;
				}

				.appraise {
					width: 95%;
					height: 420rpx;
					background-color: white;
					border-radius: 20rpx;
					margin-top: 20rpx;
				}

				.introduce {
					width: 95%;
					background-color: white;
					margin-top: 20rpx;
					overflow: hidden;
					border-radius: 20rpx;
				}

				.illustrate {
					width: 95%;
					margin-top: 20rpx;
					border-radius: 20rpx;
					overflow: hidden;
				}

				.tips {
					width: 95%;
					margin-top: 20rpx;
					border-radius: 20rpx;
					background-color: white;
					overflow: hidden;
				}

				.list {
					width: 95%;
					margin-top: 20rpx;

					.title {
						width: 100%;
						height: 100rpx;
						font-weight: bold;
						font-size: 36rpx;
						text-align: center;
						line-height: 100rpx;
					}
				}
			}
		}

		.buyBox {
			width: 100vw;
			height: 120rpx;
			background-color: white;
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;

			.box {
				width: 90%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btns {
					width: 320rpx;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.btns-item {
						width: 100rpx;
						height: 80%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;

						.icon {
							width: 45rpx;
							height: 45rpx;
							background-size: contain;
						}

						.text {
							font-size: 26rpx;
						}
					}
				}

				.pay {
					width: 300rpx;
					height: 80rpx;
					background-color: #fcd748;
					border-radius: 80rpx;
					text-align: center;
					line-height: 80rpx;
					font-weight: bold;
					font-size: 28rpx;
				}
			}
		}
	}
</style>